<!DOCTYPE html>
<html lang="en">
  	<head>
	    <meta charset="utf-8">
	    <title>xx手游管理后台</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta name="description" content="">
	    <meta name="author" content="">

	    <!-- Bootstrap core CSS -->
	    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
		
		<!-- Font Awesome -->
		<link href="css/font-awesome.min.css" rel="stylesheet">

		<!-- ionicons -->
		<link href="css/ionicons.min.css" rel="stylesheet">
		
		<!-- Morris -->
		<link href="css/morris.css" rel="stylesheet"/>	

		<!-- Datepicker -->
		<link href="css/datepicker.css" rel="stylesheet"/>	

		<!-- Animate -->
		<link href="css/animate.min.css" rel="stylesheet">

		<!-- Owl Carousel -->
		<link href="css/owl.carousel.min.css" rel="stylesheet">
		<link href="css/owl.theme.default.min.css" rel="stylesheet">

		<!-- Simplify -->
		<link href="css/simplify.min.css" rel="stylesheet">
		
		<!--时间选择器插件-->
		<link rel="stylesheet" href="pickerDateRange/dateRange.css"/>
		
		<style type="text/css">
			h4, .h4 {
			    font-size: 14px;
			}
			.font-12 {
			    font-size: 16px;
			}
			/*highchart*/
			.highcharts-credits{
				display: none;
			}
			.flot-overlay{
				display: none;
			}
			/*.highcharts-container {
				zoom: 100000;
			}*/
			@media (min-width: 992px){
				.modal-lg {
				    width: 1200px;
				}
			}									
		</style>
		
  	</head>

  	<body class="overflow-hidden">
		<div class="wrapper preload">
			<div class="sidebar-right">
				<div class="sidebar-inner scrollable-sidebar">
					<div class="sidebar-header clearfix">
						<input class="form-control dark-input" placeholder="Search" type="text">
						<div class="btn-group pull-right">
							<a href="#" class="sidebar-setting" data-toggle="dropdown"><i class="fa fa-cog fa-lg"></i></a>
							<ul class="dropdown-menu pull-right flipInV">
								<li><a href="#"><i class="fa fa-circle text-danger"></i><span class="m-left-xs">Busy</span></a></li>
								<li><a href="#"><i class="fa fa-circle-o"></i><span class="m-left-xs">Turn Off Chat</span></a></li>
							</ul>
						</div>
					</div>
					<div class="title-block">
						Group Chat
					</div>
					<div class="content-block">
						<ul class="sidebar-list">
							<li>
								<a href="#">
									<i class="fa fa-circle-o text-success"></i><span class="m-left-xs">Close Friends</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="fa fa-circle-o text-success"></i><span class="m-left-xs">Business</span>
								</a>
							</li>
						</ul>
					</div>
					<div class="title-block">
						Favorites
					</div>
					<div class="content-block">
						<ul class="sidebar-list">
							<li>
								<a href="#" class="clearfix">
									<img src="images/profile/profile2.jpg" class="img-circle" alt="user avatar">
									<div class="chat-detail m-left-sm">
										<div class="chat-name">
											John Doe
										</div>
										<div class="chat-message">
											Where are you?
										</div>
									</div>
									<div class="chat-status">
										<i class="fa fa-circle-o text-success"></i>
									</div>
									<div class="chat-alert">
										<span class="badge badge-purple bounceIn animation-delay2">2</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="clearfix">
									<img src="images/profile/profile3.jpg" class="img-circle" alt="user avatar">
									<div class="chat-detail m-left-sm">
										<div class="chat-name">
											Jane Doe
										</div>
										<div class="chat-message">
											Hello
										</div>
									</div>
									<div class="chat-status">
										<i class="fa fa-circle-o text-success"></i>
									</div>
									<div class="chat-alert">
										<span class="badge badge-info bounceIn animation-delay2">1</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="clearfix">
									<img src="images/profile/profile4.jpg" class="img-circle" alt="user avatar">
									<div class="chat-detail m-left-sm">
										<div class="chat-name">
											John Doe
										</div>
										<div class="chat-message">
											See you again next week.
										</div>
									</div>
									<div class="chat-status">
										<i class="fa fa-circle-o text-danger"></i>
									</div>
									<div class="chat-alert">
										<i class="fa fa-check text-success"></i>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="clearfix">
									<img src="images/profile/profile5.jpg" class="img-circle" alt="user avatar">
									<div class="chat-detail m-left-sm">
										<div class="chat-name">
											John Doe
										</div>
										<div class="chat-message">
											Hello, Are you there?
										</div>
									</div>
									<div class="chat-status">
										<i class="fa fa-circle-o text-danger"></i>
									</div>
									<div class="chat-alert">
										<i class="fa fa-reply"></i>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="title-block">
						More friends
					</div>
					<div class="content-block">
						<ul class="sidebar-list">
							<li>
								<a href="#" class="clearfix">
									<img src="images/profile/profile6.jpg" class="img-circle" alt="user avatar">
									<div class="chat-detail m-left-sm">
										<div class="chat-name">
											John Doe
										</div>
										<div class="chat-message">
											Where are you?
										</div>
									</div>
									<div class="chat-status">
										<i class="fa fa-circle-o text-success"></i>
									</div>
									<div class="chat-alert">
										<span class="badge badge-success bounceIn animation-delay2">2</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="clearfix">
									<img src="images/profile/profile7.jpg" class="img-circle" alt="user avatar">
									<div class="chat-detail m-left-sm">
										<div class="chat-name">
											Jane Doe
										</div>
										<div class="chat-message">
											Hello
										</div>
									</div>
									<div class="chat-status">
										<i class="fa fa-circle-o text-success"></i>
									</div>
									<div class="chat-alert">
										<span class="badge badge-danger bounceIn animation-delay2">1</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="clearfix">
									<img src="images/profile/profile8.jpg" class="img-circle" alt="user avatar">
									<div class="chat-detail m-left-sm">
										<div class="chat-name">
											John Doe
										</div>
										<div class="chat-message">
											See you again next week.
										</div>
									</div>
									<div class="chat-status">
										<i class="fa fa-circle-o text-danger"></i>
									</div>
									<div class="chat-alert">
										<i class="fa fa-check text-success"></i>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="clearfix">
									<img src="images/profile/profile9.jpg" class="img-circle" alt="user avatar">
									<div class="chat-detail m-left-sm">
										<div class="chat-name">
											John Doe
										</div>
										<div class="chat-message">
											Hello, Are you there?
										</div>
									</div>
									<div class="chat-status">
										<i class="fa fa-circle-o text-danger"></i>
									</div>
									<div class="chat-alert">
										<i class="fa fa-reply"></i>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div><!-- sidebar-inner -->
			</div><!-- sidebar-right -->
			<header class="top-nav">
				<div class="top-nav-inner">
					<div class="nav-header">
						<button type="button" class="navbar-toggle pull-left sidebar-toggle" id="sidebarToggleSM">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						
						<ul class="nav-notification pull-right">
							<li>
								<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog fa-lg"></i></a>
								<span class="badge badge-danger bounceIn">1</span>
								<ul class="dropdown-menu dropdown-sm pull-right user-dropdown">
									<li class="user-avatar">
										<img src="images/profile/profile1.jpg" alt="" class="img-circle">
										<div class="user-content">
											<h5 class="no-m-bottom">Jane Doe</h5>
											<div class="m-top-xs">
												<a href="profile.html" class="m-right-sm">Profile</a>
												<a href="signin.html">Log out</a>
											</div>
										</div>
									</li>	  
									<li>
										<a href="inbox.html">
											Inbox
											<span class="badge badge-danger bounceIn animation-delay2 pull-right">1</span>
										</a>
									</li>			  
									<li>
										<a href="#">
											Notification
											<span class="badge badge-purple bounceIn animation-delay3 pull-right">2</span>
										</a>
									</li>			  
									<li>
										<a href="#" class="sidebarRight-toggle">
											Message
											<span class="badge badge-success bounceIn animation-delay4 pull-right">7</span>
										</a>
									</li>			  	  
									<li class="divider"></li>
									<li>
										<a href="#">Setting</a>
									</li>			  	  
								</ul>
							</li>
						</ul>
						
						<a href="index.html" class="brand">
							<i class="fa fa-desktop"></i><span class="brand-name">xx手游管理后台</span>
						</a>
					</div>
					<div class="nav-container">
						<button type="button" class="navbar-toggle pull-left sidebar-toggle" id="sidebarToggleLG">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<ul class="nav-notification">	
							<li class="search-list">
								<div class="search-input-wrapper">
									<div class="search-input">
										<input type="text" class="form-control input-sm inline-block">
										<a href="#" class="input-icon text-normal"><i class="ion-ios7-search-strong"></i></a>
									</div>
								</div>
							</li>
						</ul>
						<div class="pull-right m-right-sm">
							<div class="user-block hidden-xs">
								<a href="#" id="userToggle" data-toggle="dropdown">
									<img src="images/profile/profile1.jpg" alt="" class="img-circle inline-block user-profile-pic">
									<div class="user-detail inline-block">
										admin
										<i class="fa fa-angle-down"></i>
									</div>
								</a>
								<div class="panel border dropdown-menu user-panel">
									<div class="panel-body paddingTB-sm">
										<ul>
											<li>
												<a href="profile.html">
													<i class="fa fa-edit fa-lg"></i><span class="m-left-xs">My Profile</span>
												</a>
											</li>
											<li>
												<a href="inbox.html">
													<i class="fa fa-inbox fa-lg"></i><span class="m-left-xs">Inboxes</span>
													<span class="badge badge-danger bounceIn animation-delay3">2</span>
												</a>
											</li>
											<li>
												<a href="signin.html">
													<i class="fa fa-power-off fa-lg"></i><span class="m-left-xs">Sign out</span>
												</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<ul class="nav-notification">
								<li>
									<a href="#" data-toggle="dropdown"><i class="fa fa-envelope fa-lg"></i></a>
									<span class="badge badge-purple bounceIn animation-delay5 active">2</span>
									<ul class="dropdown-menu message pull-right">
										<li><a>You have 4 new unread messages</a></li>					  
										<li>
											<a class="clearfix" href="#">
												<img src="images/profile/profile2.jpg" alt="User Avatar">
												<div class="detail">
													<strong>John Doe</strong>
													<p class="no-margin">
														Lorem ipsum dolor sit amet...
													</p>
													<small class="text-muted"><i class="fa fa-check text-success"></i> 27m ago</small>
												</div>
											</a>	
										</li>
										<li>
											<a class="clearfix" href="#">
												<img src="images/profile/profile3.jpg" alt="User Avatar">
												<div class="detail">
													<strong>Jane Doe</strong>
													<p class="no-margin">
														Lorem ipsum dolor sit amet...
													</p>
													<small class="text-muted"><i class="fa fa-check text-success"></i> 5hr ago</small>
												</div>
											</a>	
										</li>
										<li>
											<a class="clearfix" href="#">
												<img src="images/profile/profile4.jpg" alt="User Avatar">
												<div class="detail m-left-sm">
													<strong>Bill Doe</strong>
													<p class="no-margin">
														Lorem ipsum dolor sit amet...
													</p>
													<small class="text-muted"><i class="fa fa-reply"></i> Yesterday</small>
												</div>
											</a>	
										</li>
										<li>
											<a class="clearfix" href="#">
												<img src="images/profile/profile5.jpg" alt="User Avatar">
												<div class="detail">
													<strong>Baby Doe</strong>
													<p class="no-margin">
														Lorem ipsum dolor sit amet...
													</p>
													<small class="text-muted"><i class="fa fa-reply"></i> 9 Feb 2013</small>
												</div>
											</a>	
										</li>
										<li><a href="#">View all messages</a></li>					  
									</ul>
								</li>
								<li>
									<a href="#" data-toggle="dropdown"><i class="fa fa-bell fa-lg"></i></a>
									<span class="badge badge-info bounceIn animation-delay6 active">4</span>
									<ul class="dropdown-menu notification dropdown-3 pull-right">
										<li><a href="#">You have 5 new notifications</a></li>					  
										<li>
											<a href="#">
												<span class="notification-icon bg-warning">
													<i class="fa fa-warning"></i>
												</span>
												<span class="m-left-xs">Server #2 not responding.</span>
												<span class="time text-muted">Just now</span>
											</a>
										</li>
										<li>
											<a href="#">
												<span class="notification-icon bg-success">
													<i class="fa fa-plus"></i>
												</span>
												<span class="m-left-xs">New user registration.</span>
												<span class="time text-muted">2m ago</span>
											</a>
										</li>
										<li>
											<a href="#">
												<span class="notification-icon bg-danger">
													<i class="fa fa-bolt"></i>
												</span>
												<span class="m-left-xs">Application error.</span>
												<span class="time text-muted">5m ago</span>
											</a>
										</li>
										<li>
											<a href="#">
												<span class="notification-icon bg-success">
													<i class="fa fa-usd"></i>
												</span>
												<span class="m-left-xs">2 items sold.</span>
												<span class="time text-muted">1hr ago</span>
											</a>
										</li>
										<li>
											<a href="#">
												<span class="notification-icon bg-success">
													<i class="fa fa-plus"></i>
												</span>
												<span class="m-left-xs">New user registration.</span>
												<span class="time text-muted">1hr ago</span>
											</a>
										</li>
										<li><a href="#">View all notifications</a></li>					  
									</ul>
								</li>
								<li class="chat-notification">
									<a href="#" class="sidebarRight-toggle"><i class="fa fa-comments fa-lg"></i></a>
									<span class="badge badge-danger bounceIn">1</span>

									<div class="chat-alert">
										Hello, Are you there?
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div><!-- ./top-nav-inner -->	
			</header>
			<aside class="sidebar-menu fixed">
				<div class="sidebar-inner scrollable-sidebar">
					<div class="main-menu">
						<ul class="accordion">														
							<li class="menu-header">
								Main Menu
							</li>
							
							<!--首页-->
							<li class="bg-palette1 active">
								<a href="index.html">
									<span class="menu-content block">
										<span class="menu-icon"><i class="block fa fa-home fa-lg"></i></span>
										<span class="text m-left-sm">首页</span>
									</span>
									<span class="menu-content-hover block">
										首页
									</span>
								</a>
							</li>
							
							<!--实时预览-->
							<li class="openable bg-palette2">
								<a href="#">
									<span class="menu-content block">
										<span class="menu-icon"><i class="block fa fa-list fa-lg"></i></span>
										<span class="text m-left-sm">实时预览</span>
										<!--<span class="submenu-icon"></span>-->
									</span>
									<span class="menu-content-hover block">
										实时预览
									</span>
								</a>
							</li>
							
							<!--用户分析-->
							<li class="openable bg-palette3">
								<a href="#">
									<span class="menu-content block">
										<span class="menu-icon"><i class="block fa fa-book fa-lg"></i></span>
										<span class="text m-left-sm">用户分析</span>
										<span class="submenu-icon"></span>
									</span>
									<span class="menu-content-hover block">
										用户分析
									</span>
								</a>
								<ul class="submenu bg-palette4">
									<li><a href="form_element.html"><span class="submenu-label">新增用户</span></a></li>	
									<li><a href="form_element.html"><span class="submenu-label">活跃用户</span></a></li>	
									<li><a href="form_element.html"><span class="submenu-label">启动次数</span></a></li>	
									<li><a href="form_element.html"><span class="submenu-label">地区分析</span></a></li>
									<li><a href="form_element.html"><span class="submenu-label">版本分析</span></a></li>	
									<li><a href="form_element.html"><span class="submenu-label">留存分析</span></a></li>
									<li><a href="form_element.html"><span class="submenu-label">使用时长</span></a></li>	
									<li><a href="form_element.html"><span class="submenu-label">流失率</span></a></li>
								</ul>
							</li>
							
							<!--收入分析-->
							<li class="openable bg-palette4">
								<a href="#">
									<span class="menu-content block">
										<span class="menu-icon"><i class="block fa fa-building-o fa-lg" aria-hidden="true"></i></span>
										<span class="text m-left-sm">收入分析</span>
										<!--<span class="submenu-icon"></span>-->
									</span>
									<span class="menu-content-hover block">
										收入分析
									</span>
								</a>								
							</li>
							<li class="menu-header">
								Others
							</li>
							
							<!--运营-->
							<li class="openable bg-palette4">
								<a href="#">
									<span class="menu-content block">
										<span class="menu-icon"><i class="block fa fa-fighter-jet fa-lg"></i></span>
										<span class="text m-left-sm">运营</span>
										<!--<span class="submenu-icon"></span>-->
									</span>
									<span class="menu-content-hover block">
										运营
									</span>
								</a>								
							</li>
														
							<!--设置-->
							<li class="openable bg-palette4">
								<a href="#">
									<span class="menu-content block">
										<span class="menu-icon"><i class="block fa fa-cog fa-lg"></i></span>
										<span class="text m-left-sm">设置</span>
										<!--<span class="submenu-icon"></span>-->
									</span>
									<span class="menu-content-hover block">
										设置
									</span>
								</a>								
							</li>
						</ul>
					</div>	
					<div class="sidebar-fix-bottom clearfix">
						<div class="user-dropdown dropup pull-left">
							<a href="#" class="dropdwon-toggle font-18" data-toggle="dropdown"><i class="ion-person-add"></i>
							</a>
							<ul class="dropdown-menu">
								<li>
									<a href="inbox.html">
										Inbox
										<span class="badge badge-danger bounceIn animation-delay2 pull-right">1</span>
									</a>
								</li>			  
								<li>
									<a href="#">
										Notification
										<span class="badge badge-purple bounceIn animation-delay3 pull-right">2</span>
									</a>
								</li>			  
								<li>
									<a href="#" class="sidebarRight-toggle">
										Message
										<span class="badge badge-success bounceIn animation-delay4 pull-right">7</span>
									</a>
								</li>			  	  
								<li class="divider"></li>
								<li>
									<a href="#">Setting</a>
								</li>			  	  
							</ul>
						</div>
						<a href="lockscreen.html" class="pull-right font-18"><i class="ion-log-out"></i></a>
					</div>
				</div><!-- sidebar-inner -->
			</aside>
			
			<div class="main-container">
				<div class="padding-md">
					<div class="row">
						<div class="col-sm-6 text-left p-top-sm text-left-sm">
							<div class="uk-form-controls uk-form-controls-text">
		                        <div class="ta_date" id="div_date_demo3">
		                            <span class="date_title" id="date_demo3"></span>
		                            <a class="opt_sel" id="input_trigger_demo3" href="#">
		                                <i class="i_orderd"></i>
		                            </a>
		                        </div>
		                        <div id="datePicker"></div>
		                        <button class="btn btn-sm btn-success" style="margin-left: 5px;">查询</button>
		                   </div>							
						</div>
						<div class="col-sm-6 text-right text-left-sm p-top-sm">
							<div class="btn-group">
							  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							    游戏列表 <span class="caret"></span>
							  </button>
							  <ul class="dropdown-menu pull-right" role="menu">
							    <li><a href="#">游戏1</a></li>
							    <li><a href="#">游戏2</a></li>
							    <li><a href="#">游戏3</a></li>
							    <!--<li class="divider"></li>
							    <li><a href="#">设置</a></li>-->
							  </ul>
							</div>

							<a class="btn btn-default"><i class="fa fa-cog"></i></a>
						</div>
					</div>					

					<div class="row m-top-md">
						<!--新增用户-->
						<div class="col-lg-6">
							<div class="smart-widget widget-dark-blue">
								<div class="smart-widget-header">
									新增用户
									<span class="smart-widget-option">
										<span class="refresh-icon-animated">
											<i class="fa fa-circle-o-notch fa-spin"></i>
										</span>
										<a data-toggle="modal" data-target="#largeModal">
			                                <i class="fa fa-arrows-h"></i>
			                            </a>
			                            <a href="" class="widget-toggle-hidden-option">
			                                <i class="fa fa-cog"></i>
			                            </a>
			                            <a href="#" class="widget-collapse-option" data-toggle="collapse">
			                                <i class="fa fa-chevron-up"></i>
			                            </a>
			                            <a href="#" class="widget-refresh-option">
			                                <i class="fa fa-refresh"></i>
			                            </a>
			                            <a href="#" class="widget-remove-option">
			                                <i class="fa fa-times"></i>
			                            </a>
			                        </span>
								</div>
								<div class="smart-widget-inner">
									<div class="smart-widget-hidden-section">
										<ul class="widget-color-list clearfix">
											<li style="background-color:#20232b;" data-color="widget-dark"></li>
											<li style="background-color:#4c5f70;" data-color="widget-dark-blue"></li>
											<li style="background-color:#23b7e5;" data-color="widget-blue"></li>
											<li style="background-color:#2baab1;" data-color="widget-green"></li>
											<li style="background-color:#edbc6c;" data-color="widget-yellow"></li>
											<li style="background-color:#fbc852;" data-color="widget-orange"></li>
											<li style="background-color:#e36159;" data-color="widget-red"></li>
											<li style="background-color:#7266ba;" data-color="widget-purple"></li>
											<li style="background-color:#f5f5f5;" data-color="widget-light-grey"></li>
											<li style="background-color:#fff;" data-color="reset"></li>
										</ul>
									</div>
									<div class="smart-widget-body no-padding">
										
										
										<div class="bg-grey">
											<div class="row">
												<div class="col-xs-4 text-center">
													<h3 class="m-top-sm">248.49K</h3>
													<small class="m-bottom-sm block">新增用户(总和)</small>
												</div>
												
											</div>
										</div>
										<div class="padding-md">
											<div id="totalSalesChart" style="height:250px;"></div>
										</div>
									</div>
								</div><!-- ./smart-widget-inner -->
							</div><!-- ./smart-widget -->
						</div><!-- ./col -->
						<!--DAU-->
						<div class="col-lg-6">
							<div class="smart-widget widget-dark-blue">
								<div class="smart-widget-header">
									DAU
									<span class="smart-widget-option">
										<span class="refresh-icon-animated">
											<i class="fa fa-circle-o-notch fa-spin"></i>
										</span>
										<a data-toggle="modal" data-target="#largeModal">
			                                <i class="fa fa-arrows-h"></i>
			                            </a>
			                            <a href="#" class="widget-toggle-hidden-option">
			                                <i class="fa fa-cog"></i>
			                            </a>
			                            <a href="#" class="widget-collapse-option" data-toggle="collapse">
			                                <i class="fa fa-chevron-up"></i>
			                            </a>
			                            <a href="#" class="widget-refresh-option">
			                                <i class="fa fa-refresh"></i>
			                            </a>
			                            <a href="#" class="widget-remove-option">
			                                <i class="fa fa-times"></i>
			                            </a>
			                        </span>
								</div>
								<div class="smart-widget-inner">
									<div class="smart-widget-hidden-section">
										<ul class="widget-color-list clearfix">
											<li style="background-color:#20232b;" data-color="widget-dark"></li>
											<li style="background-color:#4c5f70;" data-color="widget-dark-blue"></li>
											<li style="background-color:#23b7e5;" data-color="widget-blue"></li>
											<li style="background-color:#2baab1;" data-color="widget-green"></li>
											<li style="background-color:#edbc6c;" data-color="widget-yellow"></li>
											<li style="background-color:#fbc852;" data-color="widget-orange"></li>
											<li style="background-color:#e36159;" data-color="widget-red"></li>
											<li style="background-color:#7266ba;" data-color="widget-purple"></li>
											<li style="background-color:#f5f5f5;" data-color="widget-light-grey"></li>
											<li style="background-color:#fff;" data-color="reset"></li>
										</ul>
									</div>
									<div class="smart-widget-body no-padding">
										
										<div class="bg-grey">
											<div class="row">
												<div class="col-xs-4 text-center">
													<h3 class="m-top-sm">20.46K</h3>
													<small class="m-bottom-sm block">DAU(均值)</small>
												</div>
												
											</div>
										</div>
										
										<div class="padding-md">
											<div id="placeholder" style="height:250px;"></div>
										</div>
										
									</div>
								</div><!-- ./smart-widget-inner -->
							</div><!-- ./smart-widget -->
						</div><!-- ./col -->
					</div>
					
					<div class="row m-top-md">
						<!--充值金额-->
						<div class="col-lg-6">
							<div class="smart-widget widget-dark-blue">
								<div class="smart-widget-header">
									充值金额
									<span class="smart-widget-option">
										<span class="refresh-icon-animated">
											<i class="fa fa-circle-o-notch fa-spin"></i>
										</span>
										<a data-toggle="modal" data-target="#largeModal">
			                                <i class="fa fa-arrows-h"></i>
			                            </a>
			                            <a href="" class="widget-toggle-hidden-option">
			                                <i class="fa fa-cog"></i>
			                            </a>
			                            <a href="#" class="widget-collapse-option" data-toggle="collapse">
			                                <i class="fa fa-chevron-up"></i>
			                            </a>
			                            <a href="#" class="widget-refresh-option">
			                                <i class="fa fa-refresh"></i>
			                            </a>
			                            <a href="#" class="widget-remove-option">
			                                <i class="fa fa-times"></i>
			                            </a>
			                        </span>
								</div>
								<div class="smart-widget-inner">
									<div class="smart-widget-hidden-section">
										<ul class="widget-color-list clearfix">
											<li style="background-color:#20232b;" data-color="widget-dark"></li>
											<li style="background-color:#4c5f70;" data-color="widget-dark-blue"></li>
											<li style="background-color:#23b7e5;" data-color="widget-blue"></li>
											<li style="background-color:#2baab1;" data-color="widget-green"></li>
											<li style="background-color:#edbc6c;" data-color="widget-yellow"></li>
											<li style="background-color:#fbc852;" data-color="widget-orange"></li>
											<li style="background-color:#e36159;" data-color="widget-red"></li>
											<li style="background-color:#7266ba;" data-color="widget-purple"></li>
											<li style="background-color:#f5f5f5;" data-color="widget-light-grey"></li>
											<li style="background-color:#fff;" data-color="reset"></li>
										</ul>
									</div>
									<div class="smart-widget-body no-padding">
										
										
										<div class="bg-grey">
											<div class="row">
												<div class="col-xs-4 text-center">
													<h3 class="m-top-sm">248.49K</h3>
													<small class="m-bottom-sm block">新增用户(总和)</small>
												</div>
												
											</div>
										</div>
										<div class="padding-md">
											<div id="recharge_amount" style="height:250px;"></div>
										</div>
									</div>
								</div><!-- ./smart-widget-inner -->
							</div><!-- ./smart-widget -->
						</div><!-- ./col -->
						<!--新增用户增比-->
						<div class="col-lg-6">
							<div class="smart-widget widget-dark-blue">
								<div class="smart-widget-header">
									新增用户增比
									<span class="smart-widget-option">
										<span class="refresh-icon-animated">
											<i class="fa fa-circle-o-notch fa-spin"></i>
										</span>
										<a data-toggle="modal" data-target="#largeModal">
			                                <i class="fa fa-arrows-h"></i>
			                            </a>
			                            <a href="#" class="widget-toggle-hidden-option">
			                                <i class="fa fa-cog"></i>
			                            </a>
			                            <a href="#" class="widget-collapse-option" data-toggle="collapse">
			                                <i class="fa fa-chevron-up"></i>
			                            </a>
			                            <a href="#" class="widget-refresh-option">
			                                <i class="fa fa-refresh"></i>
			                            </a>
			                            <a href="#" class="widget-remove-option">
			                                <i class="fa fa-times"></i>
			                            </a>
			                        </span>
								</div>
								<div class="smart-widget-inner">
									<div class="smart-widget-hidden-section">
										<ul class="widget-color-list clearfix">
											<li style="background-color:#20232b;" data-color="widget-dark"></li>
											<li style="background-color:#4c5f70;" data-color="widget-dark-blue"></li>
											<li style="background-color:#23b7e5;" data-color="widget-blue"></li>
											<li style="background-color:#2baab1;" data-color="widget-green"></li>
											<li style="background-color:#edbc6c;" data-color="widget-yellow"></li>
											<li style="background-color:#fbc852;" data-color="widget-orange"></li>
											<li style="background-color:#e36159;" data-color="widget-red"></li>
											<li style="background-color:#7266ba;" data-color="widget-purple"></li>
											<li style="background-color:#f5f5f5;" data-color="widget-light-grey"></li>
											<li style="background-color:#fff;" data-color="reset"></li>
										</ul>
									</div>
									<div class="smart-widget-body no-padding">
										
										<div class="bg-grey">
											<div class="row">
												<div class="col-xs-4 text-center">
													<h3 class="m-top-sm">20.46K</h3>
													<small class="m-bottom-sm block">DAU(均值)</small>
												</div>
												
											</div>
										</div>
										
										<div class="padding-md">
											<div id="added_user" style="height:250px;"></div>
										</div>
										
									</div>
								</div><!-- ./smart-widget-inner -->
							</div><!-- ./smart-widget -->
						</div><!-- ./col -->
					</div>
					
					<div class="smart-widget widget-red">
						<div class="smart-widget-header">
							用户留存率
							<span class="smart-widget-option">
								<span class="refresh-icon-animated">
									<i class="fa fa-circle-o-notch fa-spin"></i>
								</span>
								<a data-toggle="modal" data-target="#largeModal">
	                                <i class="fa fa-arrows-h"></i>
	                            </a>
	                            <a href="#" class="widget-toggle-hidden-option">
	                                <i class="fa fa-cog"></i>
	                            </a>
	                            <a href="#" class="widget-collapse-option" data-toggle="collapse">
	                                <i class="fa fa-chevron-up"></i>
	                            </a>
	                            <a href="#" class="widget-refresh-option">
	                                <i class="fa fa-refresh"></i>
	                            </a>
	                            <a href="#" class="widget-remove-option">
	                                <i class="fa fa-times"></i>
	                            </a>
	                        </span>
						</div>
						<div class="smart-widget-inner">
							<div class="smart-widget-hidden-section">
								<ul class="widget-color-list clearfix">
									<li style="background-color:#20232b;" data-color="widget-dark"></li>
									<li style="background-color:#4c5f70;" data-color="widget-dark-blue"></li>
									<li style="background-color:#23b7e5;" data-color="widget-blue"></li>
									<li style="background-color:#2baab1;" data-color="widget-green"></li>
									<li style="background-color:#edbc6c;" data-color="widget-yellow"></li>
									<li style="background-color:#fbc852;" data-color="widget-orange"></li>
									<li style="background-color:#e36159;" data-color="widget-red"></li>
									<li style="background-color:#7266ba;" data-color="widget-purple"></li>
									<li style="background-color:#f5f5f5;" data-color="widget-light-grey"></li>
									<li style="background-color:#fff;" data-color="reset"></li>
								</ul>
							</div>
							<div class="smart-widget-body no-padding">
								
								<div class="bg-grey">
									<div class="row">
										<div class="col-xs-4 text-center">
											<h3 class="m-top-sm">248.49K</h3>
											<small class="m-bottom-sm block">新增用户(总和)</small>
										</div>
										
									</div>
								</div>
								<div class="padding-md">
									<div id="retention_rate" style="height:250px;"></div>
								</div>
								
							</div>
						</div><!-- ./smart-widget-inner -->
					</div><!-- ./smart-widget -->					
				</div><!-- ./padding-md -->
			</div><!-- /main-container -->
			
			<!-- 一级模态框 -->
			<div class="modal fade" id="largeModal" style="overflow: auto">
			  	<div class="modal-dialog modal-lg">
			    	<div class="modal-content">
		      		<div class="modal-header">
		        		<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        		<h4 class="modal-title">探索</h4>
		      		</div>
		      		<div class="modal-body">			      		
		        			<div class="smart-widget widget-red">		        				
							<div class="smart-widget-inner">									
								<!--时间选择-->
								<div class="row smart-widget-body" style="margin-left: 0;">									
			                        <div class="ta_date" id="div_date_demo4">
			                            <span class="date_title" id="date_demo4"></span>
			                            <a class="opt_sel" id="input_trigger_demo4" href="#">
			                                <i class="i_orderd"></i>
			                            </a>
			                        </div>
			                        <div id="datePicker"></div>			                        
			                        <button class="btn btn-sm btn-success" style="margin-left: 5px;">查询</button>				                   
								</div>
								
								<!--指标区-->
								<div class="row smart-widget-body">
									<div class="col-md-6">
										<div class="form-group">
											<label class="control-label">左侧Y轴</label>
											<input type="text" placeholder="新增用户" class="form-control input-sm left_focus" data-parsley-required="true" value="新增用户" data-toggle="modal" data-target="#left_f">
										</div>
									</div><!-- /.col -->
									<div class="col-md-6">
										<div class="form-group">
											<label class="control-label">右侧Y轴</label>
											<input type="text" placeholder="新增指标..." class="form-control input-sm right_focus" data-parsley-required="true" data-parsley-type="url" data-toggle="modal" data-target="#right_f">
										</div>
									</div><!-- /.col -->
								</div><!-- /.row -->
								
								<!--按钮组-->
					      		<div class="row smart-widget-body">
					      			<div class="col-md-6">							      		
					      				<div class="btn-group" role="group" aria-label="..." style="padding-left: 10px;">
			      					   		<button type="button" imgtype="column" class="btn btn-default btn-primary column_type img_type">柱状图</button>
											<button type="button" imgtype="spline" class="btn btn-default line_type img_type">折线图</button>
										</div>					      				
					      			</div>					      			
					      			<div class="col-md-6">					      				
					      				<div class="btn-group" role="group" aria-label="..."  style="padding-left: 10px;">
			      					   		<button type="button" imgtype="column" class="btn btn-default column_type_r img_type_r" disabled="disabled">柱状图</button>
											<button type="button" imgtype="spline" class="btn btn-default btn-primary line_type_r img_type_r" disabled="disabled">折线图</button>
										</div>					      				
					      			</div>					      			
					      		</div>
					      		
					      		<!--图示区-->
								<div class="smart-widget-body no-padding m-top-md">									
									<hr />									
									<div class="padding-md">
										<div id="totalSalesChart_m" style="height:250px;"></div>
									</div>									
								</div>
								<!--表格区域-->
								<div class="m-top-lg widget-dark-blue">
									<div class="" style="height:550px; overflow-y: scroll;">
											<div class="smart-widget-header">
												新增用户
												<span class="smart-widget-option">
													<span class="refresh-icon-animated">
														<i class="fa fa-circle-o-notch fa-spin"></i>
													</span>
						                            <a href="#" class="widget-toggle-hidden-option">
						                                <i class="fa fa-cog"></i>
						                            </a>
						                            <a href="#" class="widget-collapse-option" data-toggle="collapse">
						                                <i class="fa fa-chevron-up"></i>
						                            </a>
						                            <a href="#" class="widget-refresh-option">
						                                <i class="fa fa-refresh"></i>
						                            </a>
						                            <a href="#" class="widget-remove-option">
						                                <i class="fa fa-times"></i>
						                            </a>
						                        </span>
											</div>
											<div class="smart-widget-inner table-responsive">
												<div class="smart-widget-hidden-section">
													<ul class="widget-color-list clearfix">
													
														<li style="background-color:#edbc6c;" data-color="widget-yellow"></li>
														<li style="background-color:#fbc852;" data-color="widget-orange"></li>
														<li style="background-color:#e36159;" data-color="widget-red"></li>
														<li style="background-color:#7266ba;" data-color="widget-purple"></li>
														<li style="background-color:#f5f5f5;" data-color="widget-light-grey"></li>
														<li style="background-color:#fff;" data-color="reset"></li>
													</ul>
												</div>
												<table class="table table-striped no-margin table-bordered">
													<thead>
														<tr>															
															<th class="text-left">支付订单号</th>
															<th class="text-left">用户</th>														
														</tr>
													</thead>
													<tbody  id="data_lists">											
													    <tr>												        
													        <td class="order">FVAGNT1513130934</td>
													        <td class="text-left">fb_108268677724169500766_1010</td>													       
													    </tr>
													    <tr>												        
													        <td class="order">FVAGNT1513130934</td>
													        <td class="text-left">fb_108268677724169500766_1010</td>													       
													    </tr>
													    <tr>												        
													        <td class="order">FVAGNT1513130934</td>
													        <td class="text-left">fb_108268677724169500766_1010</td>													       
													    </tr>
													    <tr>												        
													        <td class="order">FVAGNT1513130934</td>
													        <td class="text-left">fb_108268677724169500766_1010</td>													       
													    </tr>
													    <tr>												        
													        <td class="order">FVAGNT1513130934</td>
													        <td class="text-left">fb_108268677724169500766_1010</td>													       
													    </tr>
													    <tr>												        
													        <td class="order">FVAGNT1513130934</td>
													        <td class="text-left">fb_108268677724169500766_1010</td>													       
													    </tr>
													    <tr>												        
													        <td class="order">FVAGNT1513130934</td>
													        <td class="text-left">fb_108268677724169500766_1010</td>													       
													    </tr>
													    <tr>												        
													        <td class="order">FVAGNT1513130934</td>
													        <td class="text-left">fb_108268677724169500766_1010</td>													       
													    </tr>
													    <tr>												        
													        <td class="order">FVAGNT1513130934</td>
													        <td class="text-left">fb_108268677724169500766_1010</td>													       
													    </tr>
													</tbody>
												</table>
											</div><!-- ./smart-widget-inner -->
										</div>					
									</div><!-- ./smart-widget -->
								</div><!-- ./smart-widget-inner -->
							</div><!-- ./smart-widget -->					        		
			      		</div>
			      		<div class="modal-footer">
				        		<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				        		<!--<button type="button" class="btn btn-primary">Save changes</button>-->
			      		</div>
				    	</div>
			  	</div>
			</div>
			
			<!-- 二级模态框(左侧y轴) -->
			<div class="modal fade" id="left_f">
			  	<div class="modal-dialog">
			    	<div class="modal-content">
		      		<div class="modal-header">
		        		<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        		<h4 class="modal-title">选择指标</h4>
		      		</div>
		      		<div class="modal-body">			      		
		        			<div class="smart-widget widget-blue">							
								<div class="smart-widget-inner">
									<div class="smart-widget-body clearfix">
										<div class="search-input pull-left">
											<input type="text" class="form-control input-sm">
											<a href="#" class="input-icon text-normal"><i class="ion-ios7-search-strong"></i></a>
										</div>										
									</div>
									<ul class="list-group to-do-list sortable-list no-border" style="overflow-y: scroll; height: 400px;">
										<li class="list-group-item" draggable="true">
											<div class="custom-radio m-right-xs">
												<input type="radio" name="zhibiao_name" id="todo-check4" checked>
												<label for="todo-check4"></label>
											</div>
											<span class="zhibiao_n">新增用户</span>
											<div class="remove-list">
												<i class="fa fa-caret-right"></i>
											</div>
										</li>
										<li class="list-group-item" draggable="true">
											<div class="custom-radio m-right-xs">
												<input type="radio" name="zhibiao_name" id="todo-check2">
												<label for="todo-check2"></label>
											</div>
											<span class="zhibiao_n">付费次数</span>
											<div class="remove-list">
												<i class="fa fa-caret-right"></i>
											</div>
										</li>
										<li class="list-group-item" draggable="true">
											<div class="custom-radio m-right-xs">
												<input type="radio" name="zhibiao_name" id="todo-check3">
												<label for="todo-check3"></label>
											</div>
											<span class="zhibiao_n">回归用户</span>
											<div class="remove-list">
												<i class="fa fa-caret-right"></i>
											</div>
										</li>
										<li class="list-group-item" draggable="true">
											<div class="custom-radio m-right-xs">
												<input type="radio" name="zhibiao_name" id="todo-check1">
												<label for="todo-check1"></label>
											</div>
											<span class="zhibiao_n">ARPPU</span>
											<div class="remove-list">
												<i class="fa fa-caret-right"></i>
											</div>
										</li>
									</ul>
								</div><!-- ./smart-widget-inner -->
						</div><!-- ./smart-widget -->
			        			
			        		
		      		</div>
		      		<div class="modal-footer">
			        		<button type="button" class="btn btn-default quxiao" data-dismiss="modal">取消</button>
			        		<button type="button" class="btn btn-primary yingyong">应用</button>
		      		</div>
			    	</div>
			  	</div>
			</div>
			
			<!-- 二级模态框(右侧y轴) -->
			<div class="modal fade" id="right_f">
			  	<div class="modal-dialog">
			    	<div class="modal-content">
		      		<div class="modal-header">
		        		<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        		<h4 class="modal-title">选择指标</h4>
		      		</div>
		      		<div class="modal-body">			      		
		        			<div class="smart-widget widget-blue">						
								<div class="smart-widget-inner">
									<div class="smart-widget-body clearfix">
										<div class="search-input pull-left">
											<input type="text" class="form-control input-sm">
											<a href="#" class="input-icon text-normal"><i class="ion-ios7-search-strong"></i></a>
										</div>
									</div>
									<ul class="list-group to-do-list sortable-list no-border" style="overflow-y: scroll; height: 400px;">
										<li class="list-group-item" draggable="true">
											<div class="custom-radio m-right-xs">
												<input type="radio" name="zhibiao_name_r" id="todo2">
												<label for="todo2"></label>
											</div>
											<span class="zhibiao_n">付费次数2</span>
											<div class="remove-list">
												<i class="fa fa-caret-right"></i>
											</div>
										</li>
										<li class="list-group-item" draggable="true">
											<div class="custom-radio m-right-xs">
												<input type="radio" name="zhibiao_name_r" id="todo3">
												<label for="todo3"></label>
											</div>
											<span class="zhibiao_n">回归用户2</span>
											<div class="remove-list">
												<i class="fa fa-caret-right"></i>
											</div>
										</li>
										<li class="list-group-item" draggable="true">
											<div class="custom-radio m-right-xs">
												<input type="radio" name="zhibiao_name_r" id="todo1">
												<label for="todo1"></label>
											</div>
											<span class="zhibiao_n">ARPPU2</span>
											<div class="remove-list">
												<i class="fa fa-caret-right"></i>
											</div>
										</li>
									</ul>
								</div><!-- ./smart-widget-inner -->
						</div><!-- ./smart-widget -->
			        			
			        		
		      		</div>
		      		<div class="modal-footer">
			        		<button type="button" class="btn btn-default quxiao_r" data-dismiss="modal">取消</button>
			        		<button type="button" class="btn btn-primary yingyong_r">应用</button>
		      		</div>
			    	</div>
			  	</div>
			</div>
			
			
			
			<footer class="footer" style="text-align: center;">
				<span class="footer-brand">
					感谢使用<a href="http://www.dayugame.com/"><strong class="text-danger">大娱</strong></a>游戏运营平台 
				</span>			
			</footer>
		</div><!-- /wrapper -->

		<a href="#" class="scroll-to-top hidden-print"><i class="fa fa-chevron-up fa-lg"></i></a>

		<!-- Delete Widget Confirmation -->
		<div class="custom-popup delete-widget-popup delete-confirmation-popup" id="deleteWidgetConfirm">
			<div class="popup-header text-center">
				<span class="fa-stack fa-4x">
				  <i class="fa fa-circle fa-stack-2x"></i>
				  <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
				</span>
			</div>
			<div class="popup-body text-center">
				<h5>Are you sure to delete this widget?</h5>
				<strong class="block m-top-xs"><i class="fa fa-exclamation-circle m-right-xs text-danger"></i>This action cannot be undone</strong>
			
				<div class="text-center m-top-lg">
					<a class="btn btn-success m-right-sm remove-widget-btn">Delete</a>
					<a class="btn btn-default deleteWidgetConfirm_close">Cancel</a>
				</div>
			</div>
		</div>

		
	    <!-- Le javascript
	    ================================================== -->
	    <!-- Placed at the end of the document so the pages load faster -->
		
		<!-- Jquery -->
		<script src="js/jquery-1.11.1.min.js"></script>
		
		<!-- Bootstrap -->
	    <script src="bootstrap/js/bootstrap.min.js"></script>
	  
		<!-- Flot -->
		<script src='js/jquery.flot.min.js'></script>

		<!-- Slimscroll -->
		<script src='js/jquery.slimscroll.min.js'></script>
		
		<!-- Morris -->
		<script src='js/rapheal.min.js'></script>	
		<!--<script src='js/morris.min.js'></script>-->	

		<!-- Datepicker -->
		<script src='js/uncompressed/datepicker.js'></script>

		<!-- Sparkline -->
		<script src='js/sparkline.min.js'></script>

		<!-- Skycons -->
		<script src='js/uncompressed/skycons.js'></script>
		
		<!-- Popup Overlay -->
		<script src='js/jquery.popupoverlay.min.js'></script>

		<!-- Easy Pie Chart -->
		<script src='js/jquery.easypiechart.min.js'></script>

		<!-- Sortable -->
		<script src='js/uncompressed/jquery.sortable.js'></script>

		<!-- Owl Carousel -->
		<script src='js/owl.carousel.min.js'></script>

		<!-- Modernizr -->
		<script src='js/modernizr.min.js'></script>
		
		<!-- Simplify -->
		<script src="js/simplify/simplify.js"></script>
		<!--<script src="js/simplify/simplify_dashboard.js"></script>-->
		
		<!--highchart图表插件-->
		<script src="http://cdn.bootcss.com/highcharts/5.0.12/highcharts.js"></script>
		
		<!--时间格式化插件-->
		<script src="js/moment.min.js"></script>
		
		<!--时间选择器插件-->
		<script src="pickerDateRange/dateRange.js"></script>
		
		<script>
			$(function()	{
				
				//选择日期范围
				var dateRange = new pickerDateRange('date_demo3', {
			        aRecent7Days: 'aRecent7Days',
			        //最近7天
			        aRecent30Days: 'aRecent30Days',
			        //最近7天
			        aRecent90Days: 'aRecent90Days',
			        //最近7天
			        isTodayValid: true,
			        autoSubmit: true,
			        startDate: moment().subtract(6, 'days').format('YYYY-MM-DD'),
			        //
			        endDate:moment().format('YYYY-MM-DD') ,
			        defaultText: ' 至 ',
			        inputTrigger: 'input_trigger_demo3',
			        theme: 'ta'
			   	});	
			   	//选择日期范围(模态框)
			   	var dateRange = new pickerDateRange('date_demo4', {
			        aRecent7Days: 'aRecent7Days',
			        //最近7天
			        aRecent30Days: 'aRecent30Days',
			        //最近7天
			        aRecent90Days: 'aRecent90Days',
			        //最近7天
			        isTodayValid: true,
			        autoSubmit: true,
			        startDate: moment().subtract(6, 'days').format('YYYY-MM-DD'),
			        //
			        endDate:moment().format('YYYY-MM-DD') ,
			        defaultText: ' 至 ',
			        inputTrigger: 'input_trigger_demo4',
			        theme: 'ta'
			   	});
			   				   				
				$('.chart').easyPieChart({
					easing: 'easeOutBounce',
					size: '140',
					lineWidth: '7',
					barColor: '#7266ba',
					onStep: function(from, to, percent) {
						$(this.el).find('.percent').text(Math.round(percent));
					}
				});

				$('.sortable-list').sortable();				
				
				//Delete Widget Confirmation
				$('#deleteWidgetConfirm').popup({
					vertical: 'top',
					pagecontainer: '.container',
					transition: 'all 0.3s'
				});
												
				//柱状图函数(单个指标)
				function column_fun(id,title,xAxis,yAxis_title,series_name,series_data){						
					id.highcharts({
	                    chart: {
	                        type: 'column'
	                    },
	                    title: {
	                        text: title
	                    },
	                    subtitle: {
	                        text: ''
	                    },
	                    xAxis: {
	                        categories: xAxis,
	                        crosshair: true
	                    },
	                    yAxis: {
	                        
	                        title: {
	                            text: yAxis_title
	                        }
	                    },
	                    tooltip: {
	                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
	                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
	                        '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
	                        footerFormat: '</table>',
	                        shared: true,
	                        useHTML: true
	                    },
	                    plotOptions: {
	                        column: {
	                            pointPadding: 0.2,
	                            borderWidth: 0
	                        }
	                    },
	                    series: [{
	                        name: series_name,
	                        data: series_data
	                    }]
	                });
				}
				
				//新增用户假数据
				var id_data = $('#totalSalesChart');
				var title_data = "新增用户111";
				var xAxis_data = [
				                '一月',
				                '二月',
				                '三月',
				                '四月',
				                '五月',
				                '六月',
				                '七月'			                
				            ]
				var yAxis_title_data = "局数";
				var series_name_data = '新增用户';
				var series_data_data = [4900.9, 7100.5, 1060.4, 1290.2, 1440.0, 1760.0, 1350.6];
				
				//新增用户
				column_fun(id_data,title_data,xAxis_data,yAxis_title_data,series_name_data,series_data_data);
				//新增用户的模态框
				column_fun($('#totalSalesChart_m'),title_data,xAxis_data,yAxis_title_data,series_name_data,series_data_data);
				//新增用户增比
				column_fun($('#added_user'),'新增用户增比',xAxis_data,yAxis_title_data,series_name_data,series_data_data);
              
				// 指标对比函数（假数据）
				var comp_id = $('#totalSalesChart_m');
				var comp_title_t = '某城市有关气候参数'
				var comp_xAxis_c = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
				var comp_yAxis_1 = { // Primary yAxis
		            labels: {
		                format: '{value}°C',
		                style: {
		                    color: '#89A54E',
		                }
		            },
		            title: {
		                text: '温度',
		                style: {
		                    color: '#89A54E',
		                }
		            }
		       };	
				var comp_yAxis_2 = { // Secondary yAxis
		            title: {
		                text: '降雨量',
		                style: {
		                    color: Highcharts.getOptions().colors[0]
		                }
		            },
		            labels: {
		                format: '{value} mm',
		                style: {
		                    color: Highcharts.getOptions().colors[0]
		                }
		            },
		            opposite: true
		        };
				var 	series1_type = 'column';
				var series2_type = 'spline';				
				var comp_series_d = [{
			        name: '降雨量',
			        type: series1_type,
			        yAxis: 1,
			        data: [50.9, 71.5, 96.4, 129.2, 144.0, 106.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.8],
			        tooltip: {
			            valueSuffix: ' mm'
			        }
			   	},{
			        name: '温度',
			        color: '#89A54E',
			        type: series2_type,
			        data: [3.0, 6.8, 11.5, 16.5, 18.2, 22.5, 28.2, 36.5, 23.3, 18.3, 13.9, 2.6],
			        tooltip: {
			            valueSuffix: ' °C'
			        }
			    }];
				//倒序
			    var comp_series_d_r = [{
			        name: '温度',
			        color: '#89A54E',
			        type: series2_type,
			        data: [3.0, 6.8, 11.5, 16.5, 18.2, 22.5, 28.2, 36.5, 23.3, 18.3, 13.9, 2.6],
			        tooltip: {
			            valueSuffix: ' °C'
			        }
			    },{
			        name: '降雨量',
			        type: series1_type,
			        yAxis: 1,
			        data: [50.9, 71.5, 96.4, 129.2, 144.0, 106.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.8],
			        tooltip: {
			            valueSuffix: ' mm'
			        }
			   }];
//			   	指标函数中的series函数
				var s_n1 = '降雨量';
				var s_n2 = '温度';
				var s_d1 = [50.9, 71.5, 96.4, 129.2, 144.0, 106.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.8];
				var s_d2 = [3.0, 6.8, 11.5, 16.5, 18.2, 22.5, 28.2, 36.5, 23.3, 18.3, 13.9, 2.6];
				var s_t1 = ' mm';
				var s_t2 = ' °C';
				function index_com_series(n1,n2,d1,d2,t1,t2,series1_type,series2_type){
					return {
						series_d:[{
					        name: n1,
					        type: series1_type,
					        yAxis: 1,
					        data: d1,
					        tooltip: {
					            valueSuffix: t1 
					        }
					   	},{
					        name: n2,
					        color: '#89A54E',
					        type: series2_type,
					        data: d2,
					        tooltip: {
					            valueSuffix: t2
					        }
					    }]
					}					
				}
//				指标函数中的series函数的倒序
				function index_com_series_r(n1,n2,d1,d2,t1,t2,series1_type,series2_type){
					return {
						series_d:[{
					        name: n2,
					        color: '#89A54E',
					        type: series2_type,
					        data: d2,
					        tooltip: {
					            valueSuffix: t2
					        }
					    },{
					        name: n1,
					        type: series1_type,
					        yAxis: 1,
					        data: d1,
					        tooltip: {
					            valueSuffix: t1 
					        }
					   	}]
					}					
				}
//				指标对比函数
				function index_comparison(id,title_t,xAxis_c,yAxis_1,yAxis_2,series_d){					
					id.highcharts({
	                    chart: {
					        zoomType: 'xy'
					    },
					    title: {
					        text: title_t
					    },
					    xAxis: [{
					        categories: xAxis_c
					    }],
					    yAxis: [ yAxis_1,yAxis_2 ],
					    tooltip: {
					        shared: true
					    },
					    legend: {
				            layout: 'vertical',
				            align: 'left',
				            x: 120,
				            verticalAlign: 'top',
				            y: 100,
				            floating: true,
				            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
				        },
					    series: series_d
	                		});
				}
				 				
                //DAU假数据
                var dau_id = $('#placeholder');
                var dau_title = 'DAU1111';
                var dau_xAxis = [
				                '一月',
				                '二月',
				                '三月',
				                '四月',
				                '五月',
				                '六月',
				                '七月'			                
				            ];
				var dau_yAxis_title = '当天活跃人数';
				var dau_series_name = 'DAU';
				var dau_series_data = [43934, 52503, 57177, 69658, 97031, 119931, 137133];
                //折线图函数（单个指标）
                function line_fun(id,title,xAxis,yAxis_title,series_name,series_data){
                		//DAU           
					id.highcharts({
		                chart: {
		                    type: 'line'
		                },
		                title: {
		                    text: title
		                },
		                subtitle: {
		                    text: ''
		                },
		                xAxis: {
		                    categories: xAxis
		                },
		                yAxis: {
		                    title: {
		                        text: yAxis_title
		                    }
		                },
		                plotOptions: {
		                    line: {
		                        dataLabels: {
		                            enabled: true          // 开启数据标签
		                        },
		                        enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
		                    }
		                },
		                series: [{
		                    name: series_name,
		                    data: series_data
		                }]
		            });
                }
				//执行DAU函数
				line_fun(dau_id,dau_title,dau_xAxis,dau_yAxis_title,dau_series_name,dau_series_data);
                               				
				//充值金额(假数据)
				var recharge_id = "recharge_amount",
					recharge_title_t = '充值金额1111',
					recharge_xAxis_c = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
					recharge_yAxis_t = '气温 (°C)',
					recharge_series_a = [{
				        name: '日1',
				        data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
				    }, {
				        name: '日2',
				        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
				    },{
				        name: '日3',
				        data: [1.9, 2.2, 3.7, 8.5, 11.9, 4.2, 55.0, 16.6, 15.2, 15.3, 6.9, 14.8]
				    }];
				//折线图函数（三条）
				function line_fun_san(id,title_t,xAxis_c,yAxis_t,series_a){
					var chart = Highcharts.chart(id, {
				    chart: {
				        type: 'line'
				    },
				    title: {
				        text: title_t
				    },
				    subtitle: {
				        text: ''
				    },
				    xAxis: {
				        categories: xAxis_c
				    },
				    yAxis: {
				        title: {
				            text: yAxis_t
				        }
				    },
				    plotOptions: {
				        line: {
				            dataLabels: {
				                enabled: true          // 开启数据标签
				            },
				            enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
				        }
				    },
				    series: series_a
				});
				}
				//执行充值金额函数
				line_fun_san(recharge_id,recharge_title_t,recharge_xAxis_c,recharge_yAxis_t,recharge_series_a);											
				//执行用户留存率
				line_fun_san('retention_rate',recharge_title_t,recharge_xAxis_c,recharge_yAxis_t,recharge_series_a);				
				
				//柱状图按钮事件(左侧)
				$('.column_type').click(function(){
					console.log($('.right_focus').val());
					if($('.right_focus').val()){
						
						if($(".img_type_r").parent().find(".btn-primary").attr("imgtype") == 'column'){							
							index_comparison(comp_id,comp_title_t,comp_xAxis_c,comp_yAxis_1,comp_yAxis_2,index_com_series(s_n1,s_n2,s_d1,s_d2,s_t1,s_t2,'column','column').series_d);
						}else{							
							index_comparison(comp_id,comp_title_t,comp_xAxis_c,comp_yAxis_1,comp_yAxis_2,index_com_series(s_n1,s_n2,s_d1,s_d2,s_t1,s_t2,'column','spline').series_d);
						}
						
					}else{
						column_fun($('#totalSalesChart_m'),title_data,xAxis_data,yAxis_title_data,series_name_data,series_data_data);
					}
					
					$('.line_type').removeClass('btn-primary');
					$('.column_type').addClass('btn-primary');
				})
				
				//折线图按钮事件(左侧)
				$('.line_type').click(function(){
					if($('.right_focus').val()){
					
						if($(".img_type_r").parent().find(".btn-primary").attr("imgtype") == 'column'){
							//此处应该执行另外一个函数，不然折线图在柱状图下。
							index_comparison(comp_id,comp_title_t,comp_xAxis_c,comp_yAxis_1,comp_yAxis_2,index_com_series_r(s_n1,s_n2,s_d1,s_d2,s_t1,s_t2,'spline','column').series_d);					
						}else{
							index_comparison(comp_id,comp_title_t,comp_xAxis_c,comp_yAxis_1,comp_yAxis_2,index_com_series(s_n1,s_n2,s_d1,s_d2,s_t1,s_t2,'spline','spline').series_d);
						}						
					}else{
						line_fun($('#totalSalesChart_m'),title_data,xAxis_data,yAxis_title_data,series_name_data,series_data_data);
					}
					$('.column_type').removeClass('btn-primary');
					$('.line_type').addClass('btn-primary');
				})
				
				//柱状图按钮事件(右侧)
				$('.column_type_r').click(function(){
					$('.line_type_r').removeClass('btn-primary');
					$('.column_type_r').addClass('btn-primary');
					if($(".img_type").parent().find(".btn-primary").attr("imgtype") == 'column'){
						index_comparison(comp_id,comp_title_t,comp_xAxis_c,comp_yAxis_1,comp_yAxis_2,index_com_series(s_n1,s_n2,s_d1,s_d2,s_t1,s_t2,'column','column').series_d);
					}else{
						//此处应该执行另外一个函数，不然折线图在柱状图下。
						index_comparison(comp_id,comp_title_t,comp_xAxis_c,comp_yAxis_1,comp_yAxis_2,index_com_series_r(s_n1,s_n2,s_d1,s_d2,s_t1,s_t2,'spline','column').series_d);
					}
				})
				
				//折线图按钮事件(右侧)
				$('.line_type_r').click(function(){
					$('.column_type_r').removeClass('btn-primary');
					$('.line_type_r').addClass('btn-primary');
					if($(".img_type").parent().find(".btn-primary").attr("imgtype") == 'column'){
						index_comparison(comp_id,comp_title_t,comp_xAxis_c,comp_yAxis_1,comp_yAxis_2,index_com_series(s_n1,s_n2,s_d1,s_d2,s_t1,s_t2,'column','spline').series_d);
					}else{
						index_comparison(comp_id,comp_title_t,comp_xAxis_c,comp_yAxis_1,comp_yAxis_2,index_com_series(s_n1,s_n2,s_d1,s_d2,s_t1,s_t2,'spline','spline').series_d);
					}
				})
								
				//一级模态框左侧y轴 left_focus
				$(".yingyong").click(function(){
					var zhibiao = $('input:radio[name="zhibiao_name"]:checked').parent().parent().find(".zhibiao_n").html();
				  	$(".left_focus").val(zhibiao);
				  	$(".quxiao").trigger('click');
				})
				
				//一级模态框右侧y轴 right_focus
				$(".yingyong_r").click(function() {
					var zhibiao = $('input:radio[name="zhibiao_name_r"]:checked').parent().parent().find(".zhibiao_n").html();
					$(".right_focus").val(zhibiao);
					$(".quxiao_r").trigger('click');
					if ($(".img_type").parent().find(".btn-primary").attr("imgtype") == 'column') {
						index_comparison(comp_id,comp_title_t,comp_xAxis_c,comp_yAxis_1,comp_yAxis_2,index_com_series(s_n1,s_n2,s_d1,s_d2,s_t1,s_t2,'column', 'spline').series_d);
					} else {
						index_comparison(comp_id,comp_title_t,comp_xAxis_c,comp_yAxis_1,comp_yAxis_2,index_com_series(s_n1,s_n2,s_d1,s_d2,s_t1,s_t2,'spline','spline').series_d);
					}
					//移除元素属性
					if ($(".img_type_r").attr("disabled")) {
						$(".img_type_r").removeAttr('disabled');
					}
				})
				
			});								
		</script>
	
  	</body>
</html>
